<template>
<div>
  <div class="biao">
    姓名：<input type="text" v-model="name"><br>
    年龄：<input type="text" v-model="age"><br>
    性别：<select v-model="sb">
       <option >男</option>
       <option >女</option>
    </select>
    <br>
    <button @click="add">确定</button>
  </div>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
      </tr>
      <tr v-for=" item in list" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.geen}}</td>
        <td>
         <button @click="shan(item.id)">删除</button>
         <button @click="edit(item.id)">编辑</button>
        </td>
      </tr>
    </thead>
  </table>
</div>
</template>
<script>
export default {
  data () {
    return {
      list:[
        {id:1,name:'Tom',age:18,geen:'男'},
        {id:2,name:'jone',age:20,geen:'女'},
      ],
      name:'',
      age:'',
      sb:'',
    }
  },
  methods:{
    add(){
     this.list.push(
     {id:this.list.length+1,name:this.name,age:this.age,geen:this.sb}
     )
     this.name= ''
     this.age=''
     this.sb=''
  },
  edit(id){
    console.log(id);
    this.list.forEach((item)=>{
      return item.id===id ? (this.name = item.name,this.age = item.age,this.sb=item.geen) : item
    })
  },
  shan(id){
    this.list = this.list.filter((v)=>{
      return v.id !== id
    })
  }
  }
}
</script>
<style  scoped>
 .biao {
  text-align: center;
}
table, th, td {
	border: 1px black solid;
  text-align: center;
}
table {
  margin: 50px auto;
  width: 500px;
	border-collapse: collapse;
  border-spacing: 10px 10px;
}
button {
  margin: 0 5px;
  width: 50px;
  height: 25px;
  font-size: 12px;
}
select {
  width: 40px;
  height: 30px;
}

 
</style>